<template>
  <div class="dialogueHistory" v-loading="loading">
    <div class="scollBox">
      <div @click="handleClick(item)" class="card" v-for="(item, index) in cardList" :key="index">
        <div class="question">{{ item.question }}</div>
        <div class="tm">{{ item.gmt_latest_modified_time }}</div>
        <div @click.stop="deleteCard(item, index)" class="closeCard el-icon-circle-close"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { listSession, detailsForSession, deleteForSession } from "@/api/chartWindow";
export default {
  data() {
    return {
      cardList: [],
      loading: false,
    };
  },
  mounted() {
    this.getLIst();
  },
  methods: {
    getLIst() {
      this.loading = true;
      listSession()
        .then(result => {
          this.loading = false;
          console.log(result);
          this.cardList = result.data;
        })
        .catch(err => {
          this.loading = false;
          console.log(err);
        });
    },
    deleteCard(item, index) {
      deleteForSession({ session_id: item.session_id })
        .then(result => {
          console.log(result);
          if (result.code == 200) {
            this.cardList = this.cardList.filter(v => v.session_id != item.session_id);
            this.$message.success(result.msg);
          }
        })
        .catch(err => {});
    },
    // 获取当前历史详情
    handleClick(item) {
      detailsForSession({
        session_id: item.session_id,
      })
        .then(result => {
          console.log(result);
          if (result.code == 200) {
            let content = [];
            (result.data || []).forEach(ele => {
              content.push({
                sender: "user",
                text: ele.question || "",
                fileList: [],
              });
              let obj = {
                sender: "assistant",
                text: ele.answer || "",
                gmtModified: ele.gmtModified,
                sessionId: item.session_id,
                rateValue: Number(ele?.markByHuman || 0),
                fileList: [],
              };
              let docs = JSON.parse(ele.knowledgeSource);
              if (docs?.length) {
                //判断是否有关联文件
                let fileList = [];
                docs.forEach(item => {
                  let obj = fileList.find(v => v.file_name == item.file_name);
                  if (!obj) fileList.push(item);
                });
                obj.fileList = fileList;
              }
              content.push(obj);
            });
            this.$emit("resetContent", content, item.session_id);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.dialogueHistory {
  width: 100%;
  height: calc(100% - 40px);
  overflow: auto;
  .scollBox {
    width: 100%;
    .card {
      min-width: 200px;
      margin: 10px 20px;
      padding: 5px 10px;
      cursor: pointer;
      border-radius: 8px;
      border: 1px solid #ccc;
      position: relative;
      text-align: left;
      padding-right: 25px;
      .question {
        font-size: 16px;
        color: #000;
        width: 100%;
        line-height: 30px;
      }
      .tm {
        color: #aaa;
        font-size: 14px;
        width: 100%;
        line-height: 25px;
      }
      &:hover {
        border-color: rgba(3, 91, 236, 0.3);
        background: rgba(3, 91, 236, 0.1);
        .closeCard {
          display: block;
        }
      }
      .closeCard {
        position: absolute;
        top: 5px;
        right: 10px;
        display: none;
        font-weight: bold;
        color: #666;
      }
    }
  }
}
</style>
